<template>
  <v-app theme="dark">
    <v-container>
      <v-row>
        <v-col>
          <h5>(grouping="min2")</h5>
          <v-number-input v-model="example1" :precision="0" grouping="min2" hide-details="auto" />
          <code class="d-block pt-3">value: {{ example1 }}</code>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <h5>(group-separator=" " grouping)</h5>
          <v-number-input v-model="example2" :precision="2" group-separator=" " hide-details="auto" grouping />
          <code class="d-block pt-3">value: {{ example2 }}</code>
        </v-col>
        <v-col>
          <h5>(locale="de")</h5>
          <v-locale-provider locale="de">
            <v-number-input v-model="example3" :precision="2" hide-details="auto" grouping />
          </v-locale-provider>
          <code class="d-block pt-3">value: {{ example3 }}</code>
        </v-col>
        <v-col>
          <h5>(precision unrestricted)</h5>
          <v-number-input v-model="example4" :precision="null" hide-details="auto" grouping />
          <code class="d-block pt-3">value: {{ example4 }}</code>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const example1 = ref(4052)
  const example2 = ref(12300000)
  const example3 = ref(200021025.5)
  const example4 = ref(0.052)
</script>